<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/scheduling' }">排班管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/rule' }">规则管理</el-breadcrumb-item>
        </el-breadcrumb>
        
        <!-- 搜索与添加信息 -->
        <el-card>
            <el-row>
                <el-header>
                    <el-col :offset="10" :span="11">
                        <h2>排班规则表</h2>
                    </el-col>
                </el-header>
                
                <el-header>
                <el-col :span="6"><span>科室类别:</span>
                    <el-select v-model="ruleInfo.deptCategoryId" size="small" filterable clearable placeholder="请选择科室类别" @change="getDept">
                        <el-option
                        v-for="item in deptTypeArray"
                        :key="item.deptCategoryId"
                        :label="item.constantItem.constantName"
                        :value="item.deptCategoryId">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="6"> <span>科室名称:</span>
                    <el-select v-model="ruleInfo.deptId" size="small" filterable clearable placeholder="请选择科室">
                        <el-option
                        v-for="item in deptArray"
                        :key="item.id"
                        :label="item.deptName"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="6"><span>挂号级别:</span>
                    <el-select v-model="ruleInfo.registLeId" size="small" filterable clearable placeholder="请选择挂号级别">
                        <el-option
                        v-for="item in registLevelArray"
                        :key="item.id"
                        :label="item.registName"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="3" :offset="1">
                    <el-button type="primary" @click="getRule">查 询</el-button>
                </el-col>
                <el-col :span="2"  >
                    <el-button type="primary" @click="openAdd">添加规则</el-button>
                </el-col>
                </el-header>
            </el-row>

        <!-- 表格 -->
            <el-col :offset="2">
                <template>
                    <el-table
                    ref="multipleTable"
                    :data="ruleArray"
                    tooltip-effect="dark"
                    style="width: 100%">
                        <el-table-column
                        prop="ruleName"
                        label="规则名称"
                        width="170">
                        </el-table-column>
                        <el-table-column
                        prop="user.realName"
                        label="医生姓名"
                        width="200">
                        </el-table-column>
                        <el-table-column
                        prop="department.deptName"
                        label="所属科室"
                        width="200">
                        </el-table-column>
                        <el-table-column
                        prop="week"
                        label="排班规则"
                        width="240">
                        </el-table-column>
                        <el-table-column label="修改" width="90">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" @click="openEdit(scope.row)">修改</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column label="删除" width="90">
                            <template slot-scope="scope">
                                <el-button size="mini" type="danger" @click="deleteRule(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table> 
                </template>
            </el-col> 
        </el-card>
        <!-- 分页组件 -->
        <el-pagination
            @size-change="ruleSizeChange"
            @current-change="ruleCurrentChange"
            :current-page="ruleInfo.pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="ruleInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

        <el-col :span="4">
          <el-dialog title="修改排班规则" width="880px" :visible.sync="editSwitch">
               <table class="tableType">
                   <tr>
                       <td>姓名</td>
                       <td v-for="(week,path) in weeks" :key="path">{{week}}</td>
                   </tr>
                   <tr>
                       <td>{{name}}</td>
                       <td v-for="(item,index) in onDuty" :key="index">
                           <el-checkbox v-model="onDuty[index]"></el-checkbox>
                       </td>
                   </tr>
               </table>
               <div slot="footer" class="dialog-footer">
                   <el-button type="primary" @click="editRule">确 定</el-button>
                    <el-button @click="editSwitch = false">取 消</el-button>
               </div>
          </el-dialog>
        </el-col>

        <el-col :span="4">
          <el-dialog title="添加排班规则" width="90%" :visible.sync="addSwitch">
               <el-header>
                  <el-col :span="7"><span>科室类别:</span>
                    <el-select v-model="ruleInfo.deptCategoryId" size="small" filterable clearable placeholder="请选择科室类别" @change="getDept">
                        <el-option
                          v-for="item in deptTypeArray"
                          :key="item.deptCategoryId"
                          :label="item.constantItem.constantName"
                          :value="item.deptCategoryId">
                        </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="7"><span>挂号级别:</span>
                    <el-select v-model="ruleInfo.registLeId" size="small" filterable clearable placeholder="请选择挂号级别">
                        <el-option
                          v-for="item in registLevelArray"
                          :key="item.id"
                          :label="item.registName"
                          :value="item.id">
                        </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="7" > <span>科室名称:</span>
                    <el-select v-model="ruleInfo.deptId" size="small" filterable clearable placeholder="请选择科室">
                        <el-option
                          v-for="item in deptArray"
                          :key="item.id"
                          :label="item.deptName"
                          :value="item.id">
                        </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="3" >
                    <el-button type="primary" @click="getUserList">查 询</el-button>
                  </el-col>
                </el-header>

                <template>
                    <el-table
                    ref="multipleTable"
                    @selection-change="handleSelectionChange"
                    :data="ruleList"
                    style="width: 100%">
                        <el-table-column
                        type="selection"
                        width="55">
                        </el-table-column>
                        <el-table-column
                        label="姓名">
                        <template slot-scope="scope">
                            {{scope.row.realName}}
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="周一上午">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.Mon_am"></el-checkbox>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="周一下午">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.Mon_pm"></el-checkbox>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="周二上午">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.Tue_am"></el-checkbox>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="周二下午">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.Tue_pm"></el-checkbox>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="周三上午">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.Wed_am"></el-checkbox>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="周三下午">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.Wed_pm"></el-checkbox>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="周四上午">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.Thu_am"></el-checkbox>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="周四下午">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.Thu_pm"></el-checkbox>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="周五上午">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.Fri_am"></el-checkbox>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="周五下午">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.Fri_pm"></el-checkbox>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="周六上午">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.Sat_am"></el-checkbox>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="周六下午">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.Sat_pm"></el-checkbox>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="周日上午">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.Sun_am"></el-checkbox>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="周日下午">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.Sun_pm"></el-checkbox>
                        </template>
                        </el-table-column>
                        
                    </el-table>
                </template>

                <!-- 分页组件 -->
                <el-pagination
                    @size-change="addSizeChange"
                    @current-change="addCurrentChange"
                    :current-page="pagenum"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="Total">
                </el-pagination>

                <div slot="footer" class="dialog-footer">
                  <el-footer>
                    <el-col :span="10">
                        <span>规则 ·<br/>名称 ·</span>
                  </el-col>
                  <el-col :span="4">
                        <el-input v-model="ruleName" placeholder="请输入规则名称"></el-input>
                    </el-col>
                  <el-col :span="4">
                    <el-button type="primary" @click="addRule()">添 加</el-button>
                  </el-col>
                  <el-col :span="3">
                    <el-button @click="addSwitch = false">取 消</el-button>
                  </el-col>
                  </el-footer>
              </div>

               
          </el-dialog>
        </el-col>

         
           
    </div>
</template>

<script>
    export default {
      data() {
        return {
            //添加页面表头复选框
            multipleSelection:[],
            //规则名称
            ruleName:'',
            //修改显示的数据
            name:'',
            weeks:['星期一上午','星期一下午','星期二上午','星期二下午','星期三上午','星期三下午',
                '星期四上午','星期四下午','星期五上午','星期五下午','星期六上午','星期六下午','星期日上午','星期日下午'],
            rule:{},
            onDuty:[],
            //修改开关
            editSwitch:false, 
            //添加开关
            addSwitch: false,
            //下拉列表数据
            deptTypeArray:[],
            deptArray:[],
            registLevelArray:[],
            //规则查询数据
            ruleInfo:{
                deptCategoryId:'',
                deptId:'',
                registLeId:'',
                pageNum:1,
                pageSize:10,
            },
            //排班规则总数
            total:0,
            //添加页面的分页数据
            pagenum:1,
            pagesize:5,
            Total:0,
            //保存请求服务端数据
            ruleList:[],
            ruleArray:[]
        }
      },
      created(){
        this.getDeptCategory();
        this.getRegistLevel();
        this.getRule();
      },
      methods:{
        //选择排班规则
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        //监听添加页面的分页
        addSizeChange(newSize){
          this.pagesize=newSize
          this.getUserList();
        },
        addCurrentChange(newPage) {
          this.pagenum=newPage
          this.getUserList();
        },
        //监听排班规则分页
        ruleSizeChange(newSize){
          this.ruleInfo.pageSize=newSize
          this.getRule();
        },
        ruleCurrentChange(newPage) {
          this.ruleInfo.pageNum=newPage
          this.getRule();
        },
        //科室分类
        getDeptCategory(){
          this.$axios.get('department/getDeptCategory'
          ).then(response=>{
            console.log(response.data);
            this.deptTypeArray=response.data;
          }).catch(error=>{
            console.log(error);
          })
        },
        //科室
        getDept(){
            this.$axios.post('department/deptListByType',this.$qs.stringify({
                deptCategoryId:this.ruleInfo.deptCategoryId,
            })).then(response=>{
                console.log(response.data);
                this.deptArray=response.data;
            }).catch(error=>{
                console.log(error);
            })
        },
        //挂号级别
        getRegistLevel(){
            this.$axios.get('registLevel/getRegistLevel'
            ).then(response=>{
                console.log(response.data);
                this.registLevelArray=response.data;
            }).catch(error=>{
                console.log(error);
            })
        },
        //获取排班规则
        getRule(){
            this.$axios.post('rule/getRule',this.$qs.stringify(
                this.ruleInfo
            )).then(response=>{
                console.log(response.data);
                this.total=response.data.total
                this.ruleArray=response.data.list;
            }).catch(error=>{
                console.log(error);
            })
        },
        //修改的开关
        openEdit(rule){
            let arr = []
            for(let i=0;i<14;i++){
                if(rule.week.substr(i,1)=="1"){
                    arr.push(true);
                }else{
                    arr.push(false);
                }
            }
            this.onDuty = arr;
            this.rule = rule;
            this.name = rule.user.realName;
            this.editSwitch = true;
        },
        //添加的开关
        openAdd(){
            this.getUserList();
            this.addSwitch = true
        },
        //生成规则
        addRule(){
            this.addSwitch = true;
        },
        //将排班的规则转成14位字符串
        translateWeek(list){
            let arr = [];
            for(let i=0;i<list.length;i++){
                if(list[i]){
                    arr.push("1");
                }else{
                    arr.push("0");
                }
            }
            return arr.join('');
        },
        //修改规则
        editRule() {
            this.rule.week = this.translateWeek(this.onDuty)
            this.$axios.post('rule/updateRule',this.$qs.stringify(
                this.rule
            )).then(response=>{
                console.log(response.data);
                if(response.data ==1){
                    this.$message.success("修改成功")
                    this.getRule()
                    this.editSwitch = false;
                }else{
                    this.$message.error("修改失败")
                }
            }).catch(error=>{
                console.log(error);
            })
        },
        //删除规则
        deleteRule(rule) {
            this.$axios.post('rule/deleteRule',this.$qs.stringify({
                ruleId:rule.id
            })).then(response=>{
                console.log(response.data);
                if(response.data ==1){
                    this.$message.success("删除成功")
                    this.getRule();
                }else{
                    this.$message.error("删除失败")
                }
            }).catch(error=>{
                console.log(error);
            })
        },
        //获取用户列表
        getUserList(){
           this.$axios.post('user/getUserList',this.$qs.stringify({
                deptCategoryId:this.ruleInfo.deptCategoryId,
                deptId:this.ruleInfo.deptId,
                registLeId:this.ruleInfo.registLeId,
                pageNum:this.pagenum,
                pageSize:this.pagesize
            })).then(response=>{
                console.log(response.data);
                this.Total = response.data.total
                let arr = []
                for(let i = 0;i<response.data.list.length;i++){
                    arr.push({
                        ruleName:'',
                        realName:response.data.list[i].realName,
                        deptId:response.data.list[i].deptId,
                        userId:response.data.list[i].id,
                        week:'',
                        Mon_am:false,
                        Mon_pm:false,
                        Tue_am:false,
                        Tue_pm:false,
                        Wed_am:false,
                        Wed_pm:false,
                        Thu_am:false,
                        Thu_pm:false,
                        Fri_am:false,
                        Fri_pm:false,
                        Sat_am:false,
                        Sat_pm:false,
                        Sun_am:false,
                        Sun_pm:false
                    })
                }
                this.ruleList = arr;
            }).catch(error=>{
                console.log(error);
            }) 
        },
        //在添加之前处理数据
        beforeAddRule(){
            if(this.ruleName==null||this.ruleName==''){
                this.$message.error("请输入规则名称")
                return false;
            }
            if(this.multipleSelection.length ==0){
                this.$message.error("请选择排班规则")
                return false;
            }
            for(let i=0;i<this.multipleSelection.length;i++){
                let arr = [];
                if(this.multipleSelection[i].Mon_am){
                    arr.push("1");
                }else{
                    arr.push("0");
                }
                if(this.multipleSelection[i].Mon_pm){
                    arr.push("1");
                }else{
                    arr.push("0");
                }
                if(this.multipleSelection[i].Tus_am){
                    arr.push("1");
                }else{
                    arr.push("0");
                }
                if(this.multipleSelection[i].Tus_apm){
                    arr.push("1");
                }else{
                    arr.push("0");
                }
                if(this.multipleSelection[i].Wed_am){
                    arr.push("1");
                }else{
                    arr.push("0");
                }
                if(this.multipleSelection[i].Wed_pm){
                    arr.push("1");
                }else{
                    arr.push("0");
                }
                if(this.multipleSelection[i].Thu_am){
                    arr.push("1");
                }else{
                    arr.push("0");
                }
                if(this.multipleSelection[i].Thu_pm){
                    arr.push("1");
                }else{
                    arr.push("0");
                }
                if(this.multipleSelection[i].Fri_am){
                    arr.push("1");
                }else{
                    arr.push("0");
                }
                if(this.multipleSelection[i].Fri_pm){
                    arr.push("1");
                }else{
                    arr.push("0");
                }
                if(this.multipleSelection[i].Sat_am){
                    arr.push("1");
                }else{
                    arr.push("0");
                }
                if(this.multipleSelection[i].Sat_pm){
                    arr.push("1");
                }else{
                    arr.push("0");
                }
                if(this.multipleSelection[i].Sun_am){
                    arr.push("1");
                }else{
                    arr.push("0");
                }
                if(this.multipleSelection[i].Sun_pm){
                    arr.push("1");
                }else{
                    arr.push("0");
                }
                this.multipleSelection[i].week = arr.join(''); 
                this.multipleSelection[i].ruleName = this.ruleName;
            }
            return true;
        },
        //添加规则
        addRule(){
            if(this.beforeAddRule()){
                console.log(this.multipleSelection)
                this.$axios.post('rule/addRule',{
                    ruleList:this.multipleSelection
                }).then(response=>{
                    console.log(response.data);
                if(response.data == this.multipleSelection.length){
                    this.addSwitch = false;
                    this.$message.success("添加成功")
                    this.getRule();
                } else{
                    this.$message.error("添加失败")
                }
                }).catch(error=>{
                    console.log(error);
                })
            }
        }
    }
}
</script>

<style scoped>
  .el-card {
    margin-top: 15px;
  }
  .tableType{
    background-color: rgb(219, 219, 219);
  }
  td {
    text-align: center;
    background-color: rgb(254, 254, 254);
  }
</style>